import React, { lazy, FC, Suspense } from "react"

const LazyComponent = lazy(
  () =>
    new Promise<{ default: FC<any> }>(
      (resolve) =>
        setTimeout(() => {
          import("./ContextApiPage").then((module) => {
            // 使用类型断言确保编译器知道 default 是一个 React 组件
            resolve({ default: module.default as FC<any> })
          })
        }, 2000) // 延迟2000毫秒
    )
)

const LazyDemoPage: React.FC = () => {
  return (
    <div>
      <h1>Lazy Loading Demo</h1>
      <Suspense fallback={<div>Loading Component...</div>}>
        <LazyComponent />
      </Suspense>
      <p>
        This page demonstrates the use of React.lazy for component lazy loading.
      </p>
    </div>
  )
}

export default LazyDemoPage
